<template>
    <div>
        <van-nav-bar :title="$route.params.username" left-text="返回" left-arrow @click-left="$router.back()" />
        <div class="chat-div">
            <div v-for="item, index in msgList" :key="index">
                <div v-if="item.username != $route.params.username" class="chat-item-right">
                    <div class="content">
                        <span>{{ item.msg }}</span>
                    </div>
                    <div class="image-right">
                        <van-image height="45px" round
                            src="http://8.130.77.26:9092/yyyysmfw/2023/09/08/50db6ed10a3342a0e65b61175a0b2455.jpg" />
                    </div>
                </div>
                <div v-else class="chat-item-left">
                    <div class="image-left">
                        <van-image height="45px" round
                            src="http://8.130.77.26:9092/yyyysmfw/2023/09/08/50db6ed10a3342a0e65b61175a0b2455.jpg" />
                    </div>
                    <div class="content">
                        <span>{{ item.msg }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="button-bottom">
            <van-field v-model="content" center clearable placeholder="请输入聊天内容" :autofocus="false">
                <template #button>
                    <van-button size="small" type="info" @click="sendMessage">发送</van-button>
                </template>
            </van-field>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Chat',
    data() {
        return {
            content: null,
            msgList: [],
            // 来自
            fromUsername: null,
            // 发送
            toUsername: null,
            // 聊天ID
            chatId: null,

        }
    },
    mounted() {
        //初始化websocket
        this.initWebSocket();
    },
    destroyed: function () { // 离开页面生命周期函数
        this.websocketclose();
    },
    methods: {
        initWebSocket: function () { // 建立连接
            // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
            this.chatId = this.$route.query.chatId;
            this.toUsername = this.$route.params.username;
            this.fromUsername = this.$store.getters.username;
            var url = "ws://localhost:8081/api/websocket/" + this.fromUsername;
            this.websock = new WebSocket(url);
            this.websock.onopen = this.websocketonopen;
            this.websock.onerror = this.websocketonerror;
            this.websock.onmessage = this.websocketonmessage;
            this.websock.onclose = this.websocketclose;
        },
        // 连接成功后调用
        websocketonopen: function () {
            console.log("WebSocket连接成功");
        },
        // 发生错误时调用
        websocketonerror: function (e) {
            console.log("WebSocket连接发生错误");
        },
        // 接收后端消息
        // vue 客户端根据返回的cmd类型处理不同的业务响应
        websocketonmessage: function (e) {
            this.msgList.push(JSON.parse(e.data))

        },
        // 关闭连接时调用
        websocketclose: function (e) {
            console.log("connection closed (" + e + ")");
        },
        // 发送消息
        sendMessage() {
            var socketMsg = { msg: this.content, fromUsername: this.fromUsername, toUsername: this.toUsername, chatId: this.chatId   }
            this.content = null
            this.websock.send(JSON.stringify(socketMsg))
        }
    },
    computed: {
        userInfo() {
            return this.$store.state.user.userInfo
        }
    }
}
</script>

<style scoped>
.chat-div {
    width: 95%;
    margin: 0 auto;
    height: 100%;
}

.chat-item-left {
    display: flex;
    align-items: center;
    margin: 5px 0 5px 0;

}

.image-left {
    width: 15%;
    margin-right: 10px;
    text-align: center;
}

.content {
    font-size: 0.9rem;
    max-width: 85%;
    background-color: rgb(155, 200, 88);
    padding: 10px;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
}

.chat-item-right {
    margin: 5px 0 5px 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.image-right {
    width: 15%;
    margin-left: 10px;
    text-align: center;
}

.button-bottom {
    width: 100%;
    bottom: 0;
    position: fixed;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}

.van-field__control {
    position: relative;
    z-index: 1;
}
</style>